<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/axios.min.js"></script>
    <script src="/js/query.js"></script>
    <script src="/djs/roomInfo.js"></script>
    <link rel="stylesheet" href="../css/roomInfo.css">
</head>


<body>
<table class="table" cellspacing="0">
    <thead><tr><th>房间地址</th><th>可容纳人数</th><th>已住人数</th><th>房间状态</th><th>房间类型</th><th>操作</th></tr></thead>
    <tbody id="data"></tbody>
</table>

<div class="cutDiv" id="cutDiv"></div>

<div >
    <input class="button" type="button" value="添加房间" onclick="showAddRoom()">
    <input class="button" type="button" value="查询房间信息" onclick="showQueryRoom()">
</div>

<div class="manage" id="addNewRoom">
    <div class="content">
    <div><h3>添加房间信息</h3></div>
    <div>房间地址：<input type="text" name="address" id="addRoomAddress"></div>
    <div>可容纳人数：<input type="text" name="manNum" id="addRoomNum"></div>
    <div>房间类型: <select name="roomType" id="roomType">
        <option>男生宿舍</option>
        <option>女生宿舍</option>
    </select></div>
    <div>
        <input class="button" type="button" value="添加" onclick="addNewRoom()">
        <input class="button" type="button" value="取消" onclick="backToRoomMain()">
    </div>
    </div>
</div>


<div class="queryRoomInfo" id="queryRoomInfo">
    <div class="content">
        <div><h3>查询房间信息</h3></div>
        <div>房间地址：<input type="text" name="address" id="queryAddress"></div>
        <div>房间状态：<select name="roomState" id="QRoomState">
            <option value="">不限</option>
            <option value="正常">正常</option>
            <option value="设施损坏">设施损坏</option>
        </select></div>
        <div>可住房间: <select name="isRoomLive" id="isRoomLive">
            <option value="不限">不限</option>
            <option value="可住房间">可住房间</option>
        </select></div>
        <div>房间类型: <select name="roomType2" id="roomType2">
            <option value="">不限</option>
            <option value="男生宿舍">男生宿舍</option>
            <option value="女生宿舍">女生宿舍</option>
        </select></div>

        <div>
            <input class="button" type="button" value="查找" onclick="queryRoom()">
            <input class="button" type="button" value="返回" onclick="backToRoomMain()">
        </div>
    </div>
</div>


<div class="findRoom" id="findRoom">
    <div class="content">
        <div><h3>查看房间信息</h3></div>
        <div>房间地址：<span id="findRoomAddress"></span></div>
        <div>房间状态：<span id="findRoomStatus"></span></div>
        <div>房间类型: <span id="findRoomType"></span></div>
        <div>可容纳人数: <span id="findRoomCapacity"></span></div>
        <div>已住人数: <span id="findRoomNum"></span></div>
        <div style="height: auto"><table border="1" width="100%" cellspacing="0">
            <thead><tr><th>学生姓名</th><th>所在班级</th><th>联系电话</th></tr></thead>
            <tbody id="roomStu"></tbody>
        </table>
        </div>
        <div>
            <input class="button" type="button" value="确定" onclick="backToRoomMain()">
        </div>
    </div>
</div>


<div class="findFac" id="findFac">
    <div class="content">
        <div><h3>房间设施维护</h3></div>
        <div style="display: none"><span id="roomIdSpan"></span></div>
        <div style="height: auto"><table border="1" width="100%" cellspacing="0">
            <thead><tr><th>损坏描述</th><th>报损日期</th><th>是否解决</th><th>处理设施</th></tr></thead>
            <tbody id="roomFac"></tbody>
        </table>
        </div>

    <div>损坏描述:</div>
        <div><textarea id="FacDes" style="width:300px;height:100px;resize: none" ></textarea></div>
        <div>
            <input class="button" type="button" value="添加设施损坏记录" onclick="addFac()">
            <input class="button" type="button" value="退出" onclick="backToRoomMain()">
        </div>
</div>
</div>



</body>
</html>